import { Button } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";

import "./index.less";


const Home = defineComponent({
  setup() {

    const $router = useRouter();
    const isActive = ref(false);
    const stepAnswer = () => {
      if (!isActive.value) {
        isActive.value = true;
        setTimeout(() => {
          $router.replace({ path: "/answers" });
          isActive.value = false;
        }, 2000);
      }
    };

    return () => (
      <div class="home-container">
        <Button
          class={{ answer: true, move: isActive.value }}
          onClick={stepAnswer}
          size="large"
          type="primary"
        >
          开始
        </Button>
        <Button
          type="primary"
          size="large"
          class="set"
          onClick={() => {
            $router.push({ path: "/set" });
          }}
        >
          设置
        </Button>
      </div>
    );
  },
});
export default Home;
